<template>
	<nav-header title="套餐购买" :show-right="false">
	
	</nav-header>
	<view class="content">
		<view class="content-top">
			<view class="content-top-left">
				<image class="img" :src="detail.packageImage" @click="previewImage()"></image>
				<view class="fonst">
					<view >{{detail.packageName}}</view>
					<view class="ft">商品内容</view>
					<view>1.官方群升级包{{detail.promotionPackageCount}}个</view>
				</view>
			</view>
			<view class="content-top-right">￥<span class="price">{{detail.agentFee}}</span></view>
		</view>
		<view class="fonst ft">
			<view>权限:</view>
			<view>1.可升级{{detail.promotionPackageCount}}个群为官方群</view>
			<view v-if="detail.exclusivePricing">2.{{detail.exclusivePricing}}</view>
			<view v-if="detail.groupAuthorization">3.{{detail.groupAuthorization}}</view>
			<view v-if="detail.regionProtection">4.{{detail.regionProtection}}</view>
			<view v-if="detail.regionManagement">5.{{detail.regionManagement}}</view>
		</view>
		<view class="fonst ft">
			<view>官方群权限:</view>
			<view>1、拥有企业管理各个升级功能</view>
			<view>2、拥有运财宝使用编辑权</view>
			<view>3、主页有流动展示牌</view>
			<view>4、可与其他企业或官方群关联</view>
		</view>
		<view class="commit">
			<view class="button-style" @click="goumai()">
				<button class="btncolor">
					<text class="text-md-Medium" style="color: #fff;">购买</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				detail:{},
				openid:""
			}
		},
		methods: {
			//图片预览
			previewImage() {
				let urls = []
				 urls.push(this.detail.packageImage);
				 uni.previewImage({
					urls: urls,
					current: 0
				 });
			},
			getdetail(id){
				this.$http({
					url:"/package/"+id,
					method:"get",
				}).then((res)=>{
					this.detail = res
				})
				
			},
			getopenid(){
				//充值
				const self = this
				// uni.showLoading({
				// 	title: "正在请求资源"
				// })
				wx.getUserInfo({
					//成功后会返回
					success: (userInfoRes) => {
						wx.login({
							success(loginRes) {
								if (loginRes.code) {
									self.$http({
										url: '/pay/wx/getOpenId', // 替换为您的实际 API 接口地址
										method: 'POST',
										data: {
											code: loginRes.code,
										},
									}).then(openidRes => {
										self.openid = openidRes.openid
									})
								}
							}
						})
					}
				})
			},
			goumai(){
				let data = {
					openId:this.openid,
					data:{
						type:this.detail.groupType,
						quota:this.detail.promotionPackageCount
					}
				}
				
				this.$http({
					url:"/pay/wx/buyPackage",
					method:"POST",
					data:data
				}).then((orderRes)=>{
					uni.showLoading({
						title: "等待支付"
					}),
					wx.requestPayment({
						timeStamp: orderRes
							.timeStamp + "",
						nonceStr: orderRes
							.nonceStr,
						signType: orderRes
							.signType,
						package: orderRes
							.prepayId,
						paySign: orderRes
							.paySign,
						success(res) {
							console.log(res);
							uni.showModal({
								title: "支付成功，请前往钱包查看",
								icon: 'success'
							})
						},
						// 失败回调
						fail(res) {
							console.log(res);
							uni.showModal({
								title: "支付失败，如您已经支付，请联系客服处理",
								icon: 'fail'
							})
						},
						// 接口调用结束回调
						complete() {
							uni.hideLoading()
						}
					})
			 })
		  }
		},
		onLoad(option) {
			this.getdetail(option.id)
			this.getopenid()
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		// margin: 10px;
		.content-top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			.content-top-left{
				width: 85%;
				display: flex;
				//justify-content: space-between;
				 //border: 1px solid red;
				 
				.img{
					width: 140px;
					height: 140px;
				}				
				
			}

			.content-top-right{
				margin-top: 29%;
				//border: 1px solid red;
				.price{
					font-size: 15px;
					color: red;
				}
			}
		}
		.fonst{
			margin-left: 10px;
			font-size: 18px;
			color:black;
			font-weight: bold;	
		}
		.ft{
			margin-top: 20px;
		}
		.commit {
			width: 100%;
			position: fixed;
			bottom: 42rpx;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		
			.button-style {
				padding: 24rpx 32rpx;
				width: 100%;
			}
		
			.btncolor {
				width: 100%;
				background-color: $brand-500;
				color: $white;
				border-radius: 34rpx;
				padding: 8rpx 24rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
</style>